<template>
  <div
    class="fileChoosetree"
    style="border-right: 1px solid #ebeef1"
  >
    <!--    <div class="findEdit">-->
    <!--      <el-select v-model="filterSelectText" v-if="switchValue" placeholder="请选择" clearable>-->
    <!--        <el-option-->
    <!--            v-for="item in typeSelect"-->
    <!--            :key="item.value"-->
    <!--            :label="item.label"-->
    <!--            :value="item.value"-->
    <!--        >-->
    <!--        </el-option>-->
    <!--      </el-select>-->
    <!--      <el-input-->
    <!--          style="width:66% !important;"-->
    <!--          v-if="switchValue"-->
    <!--          placeholder="请输入关键字"-->
    <!--          prefix-icon="el-icon-search"-->
    <!--          v-model="filterText"-->
    <!--      >-->
    <!--      </el-input>-->
    <!--    </div>-->
    <div class="box-card">
      <el-scrollbar>
        <el-tree
          lazy
          :load="loadNode"
          :node-key="nodeKey"
          :check-strictly="false"
          :allow-drop="allowDrop"
          :allow-drag="allowDrag"
          class="filter-tree"
          :data="treeData"
          :props="dataProps"
          :default-expand-all="false"
          :show-checkbox="multiple"
          :expand-on-click-node="false"
          @check="handleClick"
          @node-click="handleNodeClick"
          ref="tree">
        </el-tree>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
import baseComp from "./baseComp";
import draggable from 'vuedraggable';

let that = null;

export default {
  components: {
    draggable,
  },
  name: "fileChooseTree",
  model: {
    prop: "fileChoose",
    event: "fileChooseChange",
  },
  props: [
    "nodeKey",
    "dicData",
    "switchValue",
    "switchSelectValue",
    "multiple",
    "event",
    "dicUrl",
    "dicMethod",
    "dicQueryConfig",
    "dicFormatter",
    "dataProps",
    "fileChoose"
  ],
  extends: baseComp,
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    filterSelectText(val) {
      this.$refs.tree.filter(val);
    },
    dicData: {
      handler(val) {
        this.treeData = val;
      },
      deep: true,
      immediate: true,
    },
    dicUrl: {},
    dicMethod: {},
    dicQueryConfig: [],
    rightMenu: {
      handler(val) {
      },
      deep: true,
      immediate: true,
    },
    dataProps: {
      handler(val) {
        this.dataProps = val
      },
      deep: true,
      immediate: true,
    }
  },
  mounted() {
    that = this;
    that.getInit();
  },
  data() {
    return {
      isSelected: false,
      optionValue: '0',
      treeData: [],
      typeSelect: [],
      filterText: "",
      filterSelectText: "",
      cateNameInput: "",
      // switchSelectValue: '',
      showRightMenu: false,
      showBlankMenu: false,
      newRightMenu: [],
      draggedNodes: [],
      currentNodeKey: {},
      nodeCilck: {}
    };
  },
  methods: {
    async loadNode(node, resolve) {
      if (node.level === 0) {
        this.getInit();
      } else {
        await this.getChilden(node, resolve)
      }
    },
    allowDrop(draggingNode, dropNode, type) {
      // return true;
      this.executeEvent("xmlCilck", this.path, draggingNode);
      // return false;
    },
    allowDrag(draggingNode) {
      if (draggingNode.level == 3 || draggingNode.level == 2) {
        return true;
      }
    },

    chooseSelect(data) {
      this.executeEvent("constraintCilck", this.path, data);
    },
    getIconFont(data) {
      let icon = "#" + data.icon;
      return icon;
    },
    //树配置
    getInit() {
      let params = {
        "nowTree": [],
        "oneTree": {}
      };
      // that.dicQueryConfig.forEach((item) => {
      //   params[item.key] = item.value;
      // });
      this.$myAxios.request(this.dicMethod, this.dicUrl, params).then((res) => {
        let data = eval(this.dicFormatter)(res);
        if (data !== null && data !== undefined && data.length > 0) {
          this.$set(this, "treeData", data)
        } else {
          this.$set(this, "treeData", this.dicData)
        }
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data[this.dataProps.label].indexOf(value) !== -1;
    },
    handleClick(data) {
      // // 如果已经选中了一个节点，则取消选择
      // if (this.currentNodeKey?.id && this.$refs.tree) {
      //   this.$refs.tree.setCheckedKeys([]);
      //   // 更新当前选中节点的 key
      //   this.$refs.tree.setCheckedNodes([data]);
      // }
      // // 更新当前选中节点的 key
      // this.currentNodeKey = data;
    },
    handleNodeClick(data, checked) {
      this.$emit("fileChooseChange",data[this.nodeKey])
      this.executeEvent("selectTree", this.path, data, this);
    },
    editCateName(data) {
      this.cateNameInput = data.name;
      this.isEdit = data.code;
      this.$nextTick(() => {
        this.$refs[data.code] && this.$refs[data.code].focus();// 获取输入框，自动获取焦点
      });
    },
    getChilden(node, resolve) {
      let param = {
        "oneTree": node.data
      }
      // let nodeId = node ? node.data.id : null;
      that.$myAxios.post('/uavMesh/fileManagerApi/getDic', param).then((res) => {
        if (res) {
          let data = res.data.data;
          if (data !== null && data !== undefined && data.length > 0) {
            return resolve(data)
          } else {
            return resolve([])
          }
        }
      });
    }
  },
}
</script>
<style lang='less' scoped>

//.custom-tree-node {
//  /deep/ .el-tree-node.is-current > .el-tree-node__content {
//    color: red !important;
//  }
//}
.fileChoosetree {
  width: 100%;
  height: 100%;
  position: relative;

  .editTree {
    /deep/ .el-input--mini input {
      height: 24px !important;
    }

    /deep/ .el-button {
      width: 16px !important;
      height: 16px !important;
      margin-left: 4px;
      padding: 0
    }
  }

  .findEdit {
    display: flex;
  }

  .findEdit /deep/ .el-input {
    margin: 18px 0 10px 6px;
  }

  .findEdit /deep/ .el-select {
    width: 30% !important;
  }

  .findEdit /deep/ .el-input__inner {
    // width: 202px;
    height: 34px;
    border: 1px solid #cccccc;
  }

  .findEdit /deep/ .el-input__icon {
    line-height: 32px;
  }

  .box-card {
    font-family: Source Han Sans Medium !important;
    font-weight: 420;
    font-size: 14px;
    height: 100%;
    overflow-y: auto;

    //.el-button--primary {
    //  background: #A7A7A7;
    //  border-color: #A7A7A7;
    //}

    //.el-button--primary--click {
    //  background: var(--theme_color);
    //  border-color: var(--theme_color);
    //}

    .el-button--primary.is-plain:hover {
      border-radius: 50%;
    }

    .filter-tree {
      height: 385px;
      max-height: 400px;

      /deep/ .el-tree-node.is-current > .el-tree-node__content {
        background-color: #f8f8f8 !important;
      }
    }
  }

  .dev-type-main-left {
    overflow: auto;
    //padding: 10px;

    .right-menu {
      z-index: 1;
      position: absolute;
      height: 100px;
      width: 100px;
      position: absolute;
      border-radius: 3px;
      border: 1px solid #ccc;
      background-color: white;

      .menu-item {
        //display: block;
        line-height: 20px;
        text-align: left;
        margin-top: 10px;
        font-size: 14px;
        color: #606266;
      }
    }

    .blank-menu {
      z-index: 1;
      position: absolute;
      height: 100px;
      width: 100px;
      position: absolute;
      border-radius: 3px;
      border: 1px solid #ccc;
      background-color: white;

      .menu-item {
        //display: block;
        line-height: 20px;
        text-align: left;
        margin-top: 10px;
        font-size: 14px;
        color: #606266;
      }
    }
  }
}

</style>
